<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name='format-detection' content='telephone=no' />
<link rel="stylesheet" href="/assets/css/common.css" />
<link rel="stylesheet" href="/assets/css/iconfont/iconfont.css" />
<title>人车人</title><link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<style>
	#main{
		width:100%;
	}
	#main_border{
		width:20rem;
		margin:0 auto;
	}
	.main_section{
		text-align:center;
		position:relative;
	}
	.main_section>p{
		font-size:1.5rem;
		padding:1.2rem 0;
	}
	.main_section>div{
		margin:0 auto;
		width:15rem;
		height:15rem;
		border:1px dashed #007AFF;
		position:relative;
		display:none;
		
	}
	.main_section>div.ok{
		color:#5CB85C;
	}
	.main_section>div.active{
		display:block;
	}
	.main_section>div>i{
		font-size:8rem;
		line-height:15rem;
	}
	.main_section>div>p{
		position:absolute;
		text-align:center;
		width:100%;
		bottom:1rem;
	}
	.main_section>div input{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		opacity:0;
	}
	
	.main_section>div.loadingbox{
		position:absolute;
		bottom:0;
		margin-left:2.49rem;
	}
	.main_section>div.hide{
		display:none;
	}
	.main_section>div.loadingbox>span{
		position:absolute;
		bottom:1rem;
		text-align:center;
	}
	.main_section>div.loadingbox>p.loading{
		width:3rem;
		height:3rem;
		border-top: .4rem solid rgba(0, 0, 0, 0.2);
	    border-right: .4rem solid rgba(0, 0, 0, 0.2);
	    border-bottom: .4rem solid rgba(0, 0, 0, 0.2);
	    border-left: .4rem solid #ffffff;
		border-radius:50%;
		position:absolute;
		left:50%;
		top:50%;
		margin:-1.9rem 0 0 -1.9rem;
	}
	.main_section>div.loadingbox>p.animation{
		-webkit-animation: loading 1s infinite linear;
		animation: loading 1s infinite linear;
	}
</style>
</head>
<body>
	<!-- header start -->
	#@loginHead("实名认证","
	<a href='/login'>登录</a>")
	<!-- end header -->
	<section id="certification">
		<div id="main">
			<ul id="main_border">
				<li class="main_section">
					<p>身份证正面</p>
					<div class="up active">
						<i class="iconfont">&#xe651;</i>
						<p>请上传</p>
						<form>
							<input type="file" accept="image/jpg, image/jpeg, image/png, image/gif" name='idCardPhoto_0'/>
						</form>
					</div>
					<div class='ok'>
						<i class="iconfont">&#xe666;</i>
						<p>上传成功</p>
						<form>
							<input type="file" accept="image/jpg, image/jpeg, image/png, image/gif" name='idCardPhoto_0'/>
						</form>
					</div>
					<div class='loadingbox hide'>
						  <span>0%</span>
						  <p class='loading'></p>
					</div>
				</li>
				<li class="main_section">
					<p>身份证反面</p>
					<div class="up active">
						<i class="iconfont">&#xe651;</i>
						<p>请上传</p>
						<form>
							<input type="file" accept="image/jpg, image/jpeg, image/png, image/gif" name='idCardPhoto_1'/>
						</form>
					</div>
					<div class='ok'>
						<i class="iconfont">&#xe666;</i>
						<p>上传成功</p>
						<form>
							<input type="file" accept="image/jpg, image/jpeg, image/png, image/gif" name='idCardPhoto_2'/>
						</form>
					</div>
					<div class='loadingbox hide'>
						  <span>0%</span>
						  <p class='loading'></p>
					</div>
				</li>
			</ul>
		</div>
	</section>

	<script src="/assets/js/fastclick.min.js"></script>
	<script src="/assets/js/jquery-3.1.1.min.js"></script>
	<script src="/assets/js/xxsg.js"></script>
	<script>
	
    	var bodyDom = document.body;//用于窗口滚动
    	$('#main_border li').on("change","input[type=file]",function(){
           var that = $(this),
             files = that[0].files[0];
           
           if(files){ 
        	   
              //显示名字和大小
              /* that.parents(".upbox").siblings(".imagename").children("span").text(files.name + "（"+ _x.bytesTosize(files.size) +"）").siblings("a").css("display","inline-block");
              that.parent().siblings(".loadingbox").removeClass("hide").children("div").addClass("animation");  */
              //return;
              
              upload_file(files,that);
            }
         });
 	
	//上传
    function upload_file(file,fileDom){

		console.log(fileDom);
		var xhr = new XMLHttpRequest(),
       		formData = new FormData(),
            liDom = fileDom.parents("div");
        formData.append(fileDom.attr("name"),file);
        xhr.open("post","/userCenter/submitFile",true);
        
        fileDom.parent().parent().siblings(".loadingbox").removeClass("hide").children("p").addClass("animation");
        
        xhr.addEventListener("load",function(){
            var result = JSON.parse(this.response);
            fileDom.parent().parent().siblings(".loadingbox").addClass("hide").children("p").removeClass("animation");
            $(liDom).removeClass('active').siblings('div').addClass('active');
        });

        xhr.upload.addEventListener('progress',function(e){//监听XMLHttpRequest对象的progress事件，读取完毕后触发
            if(e.lengthComputable){//是否可以计算上传字节数
                var percent = parseInt(e.loaded / e.total * 100);   
                fileDom.parent().parent().siblings(".loadingbox").children("span").text(percent + "%")
            };
        });
        var imagenameDom = fileDom.parents(".upbox").siblings(".imagename"); 

        //失败的回调
        xhr.addEventListener('error',function(e){//监听XMLHttpRequest对象的progress事件，读取完毕后触发
        	ajaxError(fileDom,imagenameDom,"上传失败,请检查您的网络！");
        	liDom.data("submit",false);
        });
        
        xhr.send(formData);
    };
    
    </script>
</body>
</html>